<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>盒子模型</title>
  <style>
    #parent {
      border:1px solid red;
      width:500px;
      height:400px;
    }
    #child {
      border:1px solid green;
      width:200px;
      height:200px;
      /*上下左右都是10px*/
      /* padding:10px; */
      /*上下20px，左右50px*/
      /* padding:20px 50px; */
      /*上左下右*/
      padding:20px 0px 0px 100px;
      margin:20px 0px;
    }
    #parent {
      padding-top:20px;
    }
    /*如果不设置宽和高，直接设置padding，文本会在padding设置的位置*/
    span.s1 {
      border:1px solid #aaa;
      padding:10px 20px;
    }
    #d3 {
      border:1px solid #aaa;
      height:50px;
      width:150px;
      margin:40px;
      /* padding-top:25px;padding的高度是不会计算在height里面的，也就意味着，总高度是height+padding
         如此就会导致容器的总高度变高。所以没有办法使用padding来进行文本的对齐
      */
    }
  </style>
</head>
<body>
  <div id="parent">
    <div id="child">hello world</div>
  </div>
  <span class="s1">测试1</span><span class="s1">测试2</span><span class="s1">测试3</span><span class="s1">测试4</span><span class="s1">测试5</span><span class="s1">测试6</span>
  <div id="d3">
    我的导航
  </div>
</body>
</html>